import React , { PureComponent } from "react";
import { Switch } from 'mirrorx';
import * as Animated from "animated/lib/targets/react-dom";

export default class AnimatedSwitch extends PureComponent {

    animate = new Animated.Value(0);

	componentWillAppear (cb) {
	    this.toAni(1,250,cb);
	}

	toAni( value = 0 , delay = 0 , cb =()=> null ) {
	    let { animate } = this;
	    Animated.delay(delay).start(() => (
            Animated.spring(animate,{
                toValue:value
            }).start(cb)
        ));
	    return Animated;
    }

	componentWillEnter(cb) {
        this.toAni(1,250,cb);
	}

	componentWillLeave(cb) {
        this.toAni(0,0).delay(600).start(cb);
	}

	render() {
		const style = {
			opacity: Animated.template`${this.animate}`,
			transform: Animated.template`
				translateX(${this.animate.interpolate({
				inputRange: [0 , 1],
				outputRange: ["100%", "0%"]
			})})`
		};
		const { className } = this.props;
		return (
			<Animated.div style={style} className={className}>
                {this.props.children}
			</Animated.div>
		);
	}
};
